<template>
  <div class="top">
    <img src="@/assets/aiScreen/top.png" class="background" />
    <div class="text-container">
      <span class="leftTitle">{{projectName}}已连续运行 <span class="dayCount">{{ Days }}</span> 天</span>
      <span class="centerTitle">{{ centerTitle }}</span>
      <span class="rightTitle">{{ formattedTime }}</span>
    </div>
  </div>
</template>
  
<script>
import { connrequest2 } from "@/api/firstPage.js"
export default {
  name: "topForm",
  props: {
    centerTitle: {
      type: String,
      default: `企业数据分析管理系统监测中心`
    }
  },
  data() {
    return {
      projectName: '',
      Days: 0,
      currentTime: new Date()
    }
  },
  created() { 
    this.projectName = Glod.projectName
    this.CenterGetFirstPage()
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = new Date();
    }, 1000);
  },
  watch: {},
  computed: {
    formattedTime() {
      const date = this.currentTime;
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[date.getDay()];
      return `${year}年${month}月${day}日 ${weekday} ${hours}:${minutes}:${seconds}`;
    }
  },
  methods: {
    async CenterGetFirstPage(){
      const res = await connrequest2('CenterGetFirstPage')
      this.Days = Math.floor(res.Data.KeepRunningSeconds / 3600 / 24);
    }
  },
  components: {},
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>
  
<style scoped>
.top {
  position: relative;
  /* 保持相对定位 */
  height: 87px;
  /* 明确设置高度，或者根据内容自适应 */
  display: flex;
  /* 使用 Flex 布局 */
  align-items: center;
  /* 垂直居中 */
  overflow: hidden;
  /* 防止内容溢出 */
  z-index: 999;
  /*放置背景图片被颜色背景覆盖 */
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.text-container {
  position: relative;
  /* 相对于 .top 定位 */
  display: flex;
  justify-content: space-between;
  /* 分布子元素 */
  width: 100%;
  padding: 0 10px;
  padding-bottom: 25px;
  /* 根据需要调整内边距 */
  box-sizing: border-box;
  /* 包含内边距在内 */
  /* 如果需要，可以设置 align-items 来垂直对齐文字 */
}

.leftTitle {
  font-size:18px;
  color: #fff;
  margin-left: 35px;
}

.dayCount {
  color: #00d1eb;
}

.centerTitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 使用Arial字体 */
  font-size: 28px;
  /* 字体大小 */
  font-weight: bold;
  /* 字体加粗 */
  display: inline-block;
  /* 使元素成为行内块级元素 */
  line-height: 1;
  /* 调整行高 */
  background: linear-gradient(to bottom, #e7edf0, #a0cae2);
  /* 渐变背景 */
  -webkit-background-clip: text;
  /* 兼容Webkit内核浏览器 */
  background-clip: text;
  /* 标准属性 */
  -webkit-text-fill-color: transparent;
  /* 使文本颜色透明 */
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3), /* 强模糊光晕 */
               0 0 4px rgba(255, 255, 255, 0.5); /* 较弱的扩散光 */
}

.rightTitle {
  font-size:18px;
  margin-right: 35px;
  color: #00c1da;
}</style>